import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchOrderData } from "./store";
import { Cell, Tabs, ProductCard } from "react-vant";
function App() {
  const orderData = useSelector((state) => state.orderData);
  const dispatch = useDispatch();
  console.log(orderData);
  useEffect(() => {
    dispatch(fetchOrderData());
  }, []);

  return (
    <div className="App">
      <Tabs>
        <Tabs.TabPane title="全部">
          {orderData
            .reduce((p, n) => p.concat(n.children), [])
            .map((v, i) => {
              return (
                <ProductCard
                  key={i}
                  num={v.count}
                  price={v.price}
                  desc={v.word}
                  title={v.title}
                  thumb={v.image}
                  lazyload
                />
              );
            })}
        </Tabs.TabPane>
        {orderData.map((v, i) => {
          return (
            <Tabs.TabPane title={v.title} key={i}>
              {v.children.map((v, i) => {
                return (
                  <ProductCard
                    key={i}
                    num={v.count}
                    price={v.price}
                    desc={v.word}
                    title={v.title}
                    thumb={v.image}
                    lazyload
                  />
                );
              })}
            </Tabs.TabPane>
          );
        })}
      </Tabs>
    </div>
  );
}

export default App;
